<template>
  <div class="app-container">
    <el-form ref="form" :model="product" label-width="120px">
      <el-form-item label="商品名称">
        <el-input v-model="product.title"/>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="product.price"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">编辑</el-button>
      </el-form-item>
    </el-form>


    <!--<el-form ref="form" :model="form" label-width="120px">-->
    <!--<el-form-item label="Activity name">-->
    <!--<el-input v-model="form.name" />-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Activity zone">-->
    <!--<el-select v-model="form.region" placeholder="please select your zone">-->
    <!--<el-option label="Zone one" value="shanghai" />-->
    <!--<el-option label="Zone two" value="beijing" />-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Activity time">-->
    <!--<el-col :span="11">-->
    <!--<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />-->
    <!--</el-col>-->
    <!--<el-col :span="2" class="line">-</el-col>-->
    <!--<el-col :span="11">-->
    <!--<el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />-->
    <!--</el-col>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Instant delivery">-->
    <!--<el-switch v-model="form.delivery" />-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Activity type">-->
    <!--<el-checkbox-group v-model="form.type">-->
    <!--<el-checkbox label="Online activities" name="type" />-->
    <!--<el-checkbox label="Promotion activities" name="type" />-->
    <!--<el-checkbox label="Offline activities" name="type" />-->
    <!--<el-checkbox label="Simple brand exposure" name="type" />-->
    <!--</el-checkbox-group>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Resources">-->
    <!--<el-radio-group v-model="form.resource">-->
    <!--<el-radio label="Sponsor" />-->
    <!--<el-radio label="Venue" />-->
    <!--</el-radio-group>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="Activity form">-->
    <!--<el-input v-model="form.desc" type="textarea" />-->
    <!--</el-form-item>-->
    <!--<el-form-item>-->
    <!--<el-button type="primary" @click="onSubmit">Create</el-button>-->
    <!--<el-button @click="onCancel">Cancel</el-button>-->
    <!--</el-form-item>-->
    <!--</el-form>-->
  </div>
</template>

<script>
  //发送post请求携带数据时需要导入该模块
  import Qs from 'qs'
  export default {

  data() {
    return {
      product:
        {
          // "created": "2015-03-08T13:27:54.000+00:00",
          // "updated": "2015-03-08T13:27:54.000+00:00",
          // "id": 562379,
          // "title": "三星 W999 黑色 电信3G手机 双卡双待双通",
          // "sellPoint": "下单送12000毫安移动电源！双3.5英寸魔焕炫屏，以非凡视野纵观天下时局，尊崇翻盖设计，张弛中，尽显从容气度！",
          // "price": 4299000,
          // "num": 99999,
          // "barcode": null,
          // "image": "http://image.taotao.com/jd/d2ac340e728d4c6181e763e772a9944a.jpg",
          // "cid": 560,
          // "status": 1,
          // "images": [
          //   "http://image.taotao.com/jd/d2ac340e728d4c6181e763e772a9944a.jpg"
         // ]
        }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
  fetchData(){
      const id=this.$route.params.id
      const vm=this
      this.axios.get('http://localhost:8090/getItemInfo?id='+id).then(resp=>{
        vm.product=resp.data
      })
  },
    onSubmit(){
      const vm = this
      this.axios({
        method: 'POST',
        url: 'http://localhost:8090/updateItem',
        //=========解决POST请求无法携带数据的问题===========
        transformRequest: [function (data) {
          return Qs.stringify(data)
        }],
        //===============================
        data:vm.product
      }).then(function(resp){
        if(resp.data=='success')
          alert('修改成功')
        }
      ).catch(err=>{
        alert(err)
      });
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

